<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>听个锤子</title>
    <style>
       
        body{
            background: url(img/8.jpg) no-repeat center;
            text-decoration:none;
            letter-spacing: 1px;
        }
        a{
            text-decoration:none;
            color:#000000;
        }
        
#app{
    margin:0 auto;
    padding:0 auto;
}
#backgd{
    width: 1480px;
    height:700px;
    margin-top: 12px;
    margin:0 auto;
    padding:0 auto;
}
#top{
    width: 1480px;
    height:60px;
    background-color:rgba(54, 64, 214, 0.692);
}
#top_logo{
    width: 200px;
    height:60px;
    float: left;
}
.right_button ul {
    position: absolute;
    right: 120px;
    top:50px;
    float: left;
}
.right_button ul li{
    list-style: none;
    background-color:#ffffff7a;
    border:1px solid #0000008a;
}
.right_button ul li a{
    font-size: 20px;
    line-height: 25px;
}
.right_button ul ul{
    position: absolute;
    right: -100px;
    top:-55px;
}
.right_button ul li ul li{
    border:0px;
    height: 50px;
    width: 100px;
}
.right_button ul li ul li img{
    height: 100%;
    width: 100%;
}
#top_search{
    width: 1000px;
    height:50px;
    float: left;
    font-size: 36px;
}
#top_button{
    width: 280px;
    height:60px;
    float: right;
}
#content{
    width: 1480px;
    height:570px;
}
#menu{
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #ffffffd2;  
}
#menu_top{
    text-align: center;
    margin-top: 10px;
    font-size: 30px;
    width: 100%;
}
#menu1{
    width:1215px;
    padding-left: 10%;
    padding-right: 10%;
    height:488px;
    overflow-y:scroll;
    overflow-x: hidden;
    vertical-align: middle;
}
#menu1_span{
    border:1px solid #000000;
}
#menu1_1{
    width: 1000px;
    height: 250px;
    line-height: 30px;
    position: absolute;
    padding:20px;
    top: 140px;
    left: 340px;
    background-color: #ffffffe7;
}
#menu1_2{
    width: 100%;
    margin: 0px auto;
    margin-top: 40px;
}
#menu1_2_{
    margin-left: 25px;
}
#menu1_2_1{
    width:190px;
    height:190px;
    float: left;
    text-align: center;
    text-overflow:ellipsis;
    white-space:nowrap;
    overflow: hidden;
}
#menu1_2_2{
    width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: center;
    font-size: 20px;
    display: inline-block;
}
#menu1_3_1{
    width:250px;
    text-align:center;
    margin-top: 10px;
    text-overflow:ellipsis;
    white-space:nowrap;
    overflow: hidden;
}
#menu1_3_2{
    width:250px;
    height: 250px;
    overflow: hidden;
}
#menu1_3_2_{
    width:265px;
    height: 190px;
    overflow-y:scroll;
    overflow-x: hidden;
}
#menu1_3_3{
    width:75%;
    height: 450px;
    border-left: 1px solid #000000;
    float: right;
    margin-right: 15px;
}
#menu2{
    width:1215px;
    padding-left: 10%;
    padding-right: 10%;
    height:488px;
    overflow-y:scroll;
    overflow-x: hidden;
    vertical-align: middle;
}
#menu2left{
    width: auto;
    height: auto;
    float: left;
    font-size: 20px;
    line-height: 50px;
}
#menu2search{
    width: 100%;
    height: 50px;
    float: left;
    font-size: 20px;
    line-height: 50px;
    border-right: 1px solid #000000;
    border-bottom: 1px solid #000000;
}
#menu2left1{
    width: auto;
    height: 400px;
    float: left;
    font-size: 20px;
    line-height: 60px;
}
#menu2left2{
    width: auto;
    height: 400px;
    float: left;
    margin-left:10px;
    line-height: 60px;
    font-size: 20px;
}
#menu2right1{
    width: 1065px;
    height: 50px;
    float: left;
    border-bottom: 1px solid #000000;
    line-height: 50px;
    font-size: 20px;
}
#menu2right2{
    width: 1065px;
    height: 420px;
    float: left;
    overflow: hidden;
}
#menu2right2_1{
    width: 1075px;
    height: 420px;
    float: left;
    border-left: 1px solid #000000;
    padding-left: 50px;
    overflow-y: scroll;
    overflow-x: hidden;
}
#menu2_2_2{
    width:75%;
    height: 470px;
    overflow: hidden;
    border-left: 1px solid #000000;
    float: right;
    margin-right: 15px;
}
#menu2_2_2_1{
    width: 920px;
    height:415px;
    overflow-y:scroll;
    overflow-x:hidden;
}
#menu2_2_2_2{
    width:100%;
    height:30px;
    font-size: 18px;
    text-align: center;
}
#menu2_3_1{
    width:250px;
    text-align:center;
    margin-top: 10px;
    text-overflow:ellipsis;
    white-space:nowrap;
    overflow: hidden;
}
#menu2_3_2{
    width:250px;
    height: 250px;
    overflow: hidden;
}
#menu2_3_2_{
    width:265px;
    height:190px;
    overflow-y:scroll;
    overflow-x: hidden;
}
#menu3{
    width:1215px;
    padding-left: 10%;
    padding-right: 10%;
    height:488px;
    overflow-y:scroll;
    overflow-x: hidden;
    vertical-align: middle;
}
#menu3_1_1{
    width: 100%;
    height: 40px;
    font-size: 20px;
    line-height: 22px;
    text-align: center;
}
#menu3_1_1 a{
    font-weight: 100;
}
#menu3_1_2{
    width: 100%;
    height: 450px;
    overflow: hidden;
}
#menu3_1_2_{
    width: 105%;
    height: 450px;
    margin-left: 25px;
    overflow-x: hidden;
    overflow-y: scroll;
}
#menu3_1_2_1{
    width:190px;
    height:190px;
    float: left;
    text-align: center;
    text-overflow:ellipsis;
    white-space:nowrap;
    overflow: hidden;
}
#menu3_1_2_2{
    width: 100%;
    display: inline-block;
}
#menu4{
    width:1215px;
    padding-left: 10%;
    padding-right: 10%;
    height:500px;
    overflow-y:scroll;
    overflow-x: hidden;
    vertical-align: middle;
}
#menu4_1{
    margin-left: 25px;
}
#menu4_1_{
    width:190px;
    height:190px;
    float: left;
    text-align: center;
    text-overflow:ellipsis;
    white-space:nowrap;
    overflow: hidden;
}
#menu4_2_1{
    width:250px;
    text-align:center;
    margin-top: 10px;
    text-overflow:ellipsis;
    white-space:nowrap;
    overflow: hidden;
}
#menu4_2_2{
    width:250px;
    height: 250px;
    overflow: hidden;
}
#menu4_2_2_{
    width:265px;
    height: 190px;
    overflow-y:scroll;
    overflow-x: hidden;
}
#menu4_3{
    width:75%;
    height: 470px;
    overflow: hidden;
    border-left: 1px solid #000000;
    float: right;
    margin-right: 15px;
}
#menu4_3_{
    width: 920px;
    height:420px;
    overflow-y:scroll;
    overflow-x:hidden;
}
#get1jump{
    line-height: 20px;
    vertical-align: top;
}
.newget1page{
    color: blue;
}
.coverImgUrl{
    width:150px;
    height:150px;
    border:1px solid #0000002f;
    background-image: cover;
}
.coverImgUrl2{
    width:140px;
    height:140px;
    border:1px solid #0000002f;
    background-image: cover;
}
.coverImgUrl3{
    width:140px;
    height:120px;
    border:1px solid #0000002f;
    background-image: cover;
}
#content_left{
    width: 320px;
    height:570px;
    background-color: #ffffffb4;
    float: left;
    overflow: hidden;
}
#content_left_{
    width: 336px;
    height:548px;
    overflow-y:scroll;
    overflow-x:hidden;
}
#content_left_0{
    width: 320px;
    height: 30px;
    padding-top: 5px;
    background-color: #ffffffc4;
}
#content_left_1{
    width: 240px;
    height:24px;
    float: left;
    overflow: hidden;
}
#content_left_2{
    padding-right: 5px;
    height:24px;
    float: right;
}
#content_middle{
    width: 780px;
    height:570px;
    background-color: #ffffffd3;
    overflow: hidden;
    float: left;
}
#view1{
    width: 800px;
    height:512px;
    overflow-x: hidden;
    overflow-y: scroll;

}
#view1_top{
    padding-left: 30px;
    width: 800px;
    height: 30px;
    padding-top: 5px;
    background-color: #ffffffc2;
}
#view1_bot{
    width: 800px;
    margin-top: 10px;
    font-size: 18px;
    text-align: center;
    height: 30px;
    display: inline-block;
}
#ar{
    width:85%;
    float: left;
    overflow: hidden;
}
#time{
    width: 15%;
    float: right;
    overflow: hidden;

}
#number{
    width:50px;
    height:30px;
    float: left;
    text-overflow:ellipsis;
    text-align: center;
    overflow: hidden;
}
#name{
    width:200px;
    height:30px;
    float: left;
    text-overflow:ellipsis;
    text-align: center;
    margin-left: 20px;
    overflow: hidden;
}
#songer{
    width: 200px;
    height:30px;
    text-overflow:ellipsis;
    text-align: center;
    float: left;
    margin-left: 20px;
    overflow: hidden;
}
#operation{
    width: auto;
    height:20px;
    padding-top: 5px;
    float: left;
    margin-left: 60px;
}
#duration{
    width: 50px;
    height:30px;
    float: right;
    padding-right: 15px;
    font-family: '幼圆','Courier New', Courier, monospace;
}
#view2{
    width: 800px;
    height:570px;
}
#view2_{
    width: 800px;
    text-align: center;
}
#view2_1{
    width: 800px;
    height: 570px;
    margin-top:10px;
    text-align: center;
    overflow-x: hidden;
    overflow-y:scroll;
    font-family: '幼圆','Courier New', Courier, monospace;
}
#video1{
    margin-top: 80px;
    margin-left: -20px;
}
#cover{
    margin-top:50px;
}
#content_right{
    width: 380px;
    height:570px;
    float: left;
    text-indent: 2em;
    overflow:hidden;
    background-color: #ffffffc2;
}
#content_right_0{
    height: 30px;
    background-color: #ffffffc4;
    margin-left: -20px;
    padding-top: 5px;
}
#content_right_1{
    width: 407px;
    height:550px;
    float: left;
    margin-left:-15px;
    text-indent: 2em;
    font-size: 16px;
    font-weight: lighter;
    overflow-y:scroll;
    overflow-x:hidden;
}
#foot{
    width: 1480px;
    height:70px;
    background-color: rgba(28, 40, 209, 0.692);
}
#foot_{
    width: 1480px;
    height:70px;
}
#play{
    width: 380px;
    height: 30px;
    font-size: 20px;
    font-weight: lighter;
    letter-spacing: 1px;
    float: left;
    text-align: center;
    padding-top:20px;
    color:#ffffffad;
    overflow:hidden;
}
#imgleft{
    position: absolute;
    top: 76px;
    left: 790px;
}
#imgright{
    position: absolute;
    top: 76px;
    left: 860px;
}
#imglefts{
    margin-left: 30%;
}
#imgrights{
    float: right;
    margin-right:30%;
}
#historyList{
    font-size: 18px;
    font-weight: lighter;
    position: absolute;
    background-color: #fff;
    width: 870px;
    height: auto;
    padding-left:25px;
    padding-right:25px;
    padding-top: 15px;
    padding-bottom: 15px;
    overflow: hidden;
    z-index: 2;
    top: 54px;
    left: 235px;
}
.myaudio{
    padding-bottom: 7.5px;
    float: right;
    width:1100px;
    height:61px;
    overflow: hidden;
    background-color: #f1f3f4;
}
.searchText{
    position: absolute;
    top: 22px;
    width: 925px;
    padding-left: 10px;
    font-size: 23px;
}
.searchButton{
    width: 100px;
    height: 34px;
    border: 1px solid rgb(88, 156, 177);
    color: #ffffff;
    background-color:rgba(50, 97, 146, 0.685);
}
.musicCover{
    width: 400px;
    height:400px;
    border-radius: 50%;   
    animation: rotate 10s linear infinite;
}
#musicCover{
    width: 400px;
    height:400px;
    border-radius: 50%;   
}
.newplay{
    background-color:#8acef3a2;
    color:#2f00ff;
}
.avatarUrl{
    width:50px;
    height:50px;
    border-radius: 50%;
    vertical-align: middle;
}
.Video{
    margin-top:30px;
    width: 770px;
    height: 400px;
}
.dt1{ 
    line-height: 23px;
    height: 23px;
    font-size: 15px;
    color:#000000c7;
    border-bottom:1px solid #dbcdcdd7;
    letter-spacing: 1px;
}
.dl1{
    margin-top:0px;
}
.dl1 :hover{
    background-color: #d0e9e9;
}
.dl5{ 
    line-height: 30px;
    height: 30px;
    font-size: 18px;
    color:#000000;
    font-weight: lighter;
    letter-spacing: 1px;
}
.dl5 :hover{
    background-color: #d0dfe9c7;
}
.dt5{ 
    border-bottom:1px solid #dbcdcdd7;
}
.cantplay{
    font-weight: 100;
}
#menu1name{
    width: 300px;
    float: left;
    text-overflow:ellipsis;
    overflow: hidden;
}
#menu1songer{
    width: 300px;
    float: left;
    text-align: center;
    text-overflow:ellipsis;
    overflow: hidden;
}
#menu1mv{
    width: 195px;
    text-align: center;
    float: left;
}
#menu1time{
    float: right;
    margin-right: 30px;
    font-family: 'Courier New', Courier, monospace;

}
.dblButton{
    margin-top:1px;
}
.dl2{
    line-height: 30px;
    height: 30px;
    color:#000000;
    letter-spacing: 1px; 
}
.dl2 :hover{
    background-color: #e3e8f0;
}
.dt2{
    border-bottom: 1px solid #00000031;
}
.dt3{
    border-top:1px solid #cac5c5;
}
#p0{
    font-size: 18px;
    width: 100px;
    color:#000000c2;
    position: absolute;
    left: 1070px;
    top: 26px;
    z-index: 2;
}
#p1{
    font-size: 18px;
    font-weight: bold;
    color: #000000c0;
}
#p2{
    position: absolute;
    z-index: 1;
    width: 150px;
    height: 30px;
    left:1000px;
    top:56px;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 2px;
    color: #000000c0;
}
#p3{
    font-size: 18px;
    font-weight: bold;
    color: #000000c0;
}
#p4{
    font-size: 16px;
    font-weight: bold;
    color: #000000c0;
}
#p5{
    font-size: 24px;
    font-weight: bold;
    color: #9fbbf0;
}
#p6{
    font-size: 20px;
    font-weight: bold;
    color: #000000c0;
}
#p9{
    position: absolute;
    z-index: 1;
    width: 150px;
    height: 30px;
    left:985px;
    top:56px;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 2px;
    color: #000000c0;
}
#a1{
    font-size: 18px;
    line-height: 24px;
}
@keyframes rotate{
	0%{
		transform: rotateZ(0deg);/*从0度开始*/
	}
	100%{
		transform: rotateZ(360deg);/*360度结束*/
	}
}


        
    </style>      
</head>
<body>
    <div id="app">
        <div id="backgd">
            <div id="top">
                <div id="top_logo">
                    <a href="#"><img id="logo" src="img/听个锤子1.png" title="听个锤子app" width="50%" height="100%"@click="changemenu"style="margin-left:50px;"></a> 
                </div>
                <div id="top_search">                   
                    <input type="text"autocomplete="off"class="searchText"id="searchText" placeholder=" 这里输入歌名哦!" @keyup.enter="searchMusic" v-model="musicName">                         
                </div>    
                <div id="top_button">
                    <a href="#"><font id="p0" @click="gethistoryList">历史记录</font></a>
                    <div id="historyList" v-show="isView4">
                        <span  v-for="(item,index) in historyList">
                            <a id="a1"  href="#st" v-if="item" :title=item @click="changeName(item)">{{index+1}}.{{item}}</a>
                            <img src="img/删除.png" v-if="item" title="删除歌曲"width="10px" height="10px"@click="delHistoryList(index)">&nbsp;&nbsp;
                        </span>
                        <a id="a1" href="javascript:;" v-if="historyList.length"  @click="clearHistoryList"style="float:right">清空</a>
                    </div>                        
                    <a href="#"><img src="img/搜索.png"@click="searchMusic" width="40PX" height="40px"style="padding-top:10px;"></a>  
                    <a href="###"><img src="img/设置.png" @click="imgShow"style="margin-left:70px;"></a>     
                </div>           
            </div> 
            <div class="right_button" id="right_button" v-show="imgshow">
                 <ul class="nav" id="nav">
                     <li><a href="#">更换皮肤</a>
                        <ul>           
                            <li><a href="#"><img src="img/6.jpg"></a></li>
                            <li><a href="#"><img src="img/7.jpg"></a></li>
                            <li><a href="#"><img src="img/8.jpg"></a></li>
                            <li><a href="#"><img src="img/9.jpg"></a></li>
                            <li><a href="#"><img src="img/10.jpg"></a></li>
                            <li><a href="#"><img src="img/14.jpg"></a></li>
                            <li><a href="#"><img src="img/15.jpg"></a></li>
                            <li><a href="#"><img src="img/16.jpg"></a></li>
                            <li><a href="#"><img src="img/20.jpg"></a></li>
                            <li><a href="#"><img src="img/21.jpg"></a></li>
                            <li><a href="#"><img src="img/22.jpg"></a></li>
                            
                        </ul>
                    </li>
                    <li><a href="#" @click="author">关于我们</a></li>
                 </ul>
            </div>
            <div id="content">
                <div id="menu"v-show="isViewmenu">
                    <div id="menu_top">
                        <a href="#" @click="get1"><font :class="{newget1page:(ismenu1==true)}">歌单</font></a>
                        <a href="#" @click="get2"><font :class="{newget1page:(ismenu2==true)}"style="margin-left:50px;">歌手</font></a>
                        <a href="#" @click="get3"><font :class="{newget1page:(ismenu3==true)}"style="margin-left:50px;">MV</font></a>
                        <a href="#" @click="get4"><font :class="{newget1page:(ismenu4==true)}"style="margin-left:50px;">榜单</font></a>
                        <hr color="#28858b" width="80%">
                    </div>
                    <div id="menu1" v-show="ismenu1">
                        <div v-show="!isViewget1">                     
                            <font id="st1" style="font-size: 30px;">{{get1_1}}&nbsp;</font>
                            <span id="menu1_span"><a href="#" @click="isViewmenu1_1">选择分类></a></span>
                            <font>找到{{get1total}}张歌单</font>
                            <a href="#":class="{newget1page:(get1_2=='new')}" @click="get1ss('new')"><font>最新</font></a>
                            <a href="#":class="{newget1page:(get1_2=='hot')}" @click="get1ss('hot')"><font>热门</font></a>
                            <div id="menu1_1" v-show="ismenu1_1">
                                <a style="font-size: 20px;" href="#" @click="get1s('全部')">全部风格</a><br>
                                <font style="font-size: 20px;">语言:&nbsp;&nbsp;</font>
                                <font v-for="item in get1type1">
                                    <a href="#" @click="get1s(item)">{{item}}</a>&nbsp;&nbsp;|&nbsp;
                                </font><br>                                                         
                                <font style="font-size: 20px;">风格:&nbsp;&nbsp;</font>
                                <font v-for="item in get1type2">
                                    <a href="#" @click="get1s(item)">{{item}}</a>&nbsp;&nbsp;|&nbsp;
                                </font><br>  
                                <font style="font-size: 20px;">场景:&nbsp;&nbsp;</font>
                                <font v-for="item in get1type3">
                                    <a href="#" @click="get1s(item)">{{item}}</a>&nbsp;&nbsp;|&nbsp;
                                </font><br> 
                                <font style="font-size: 20px;">情感:&nbsp;&nbsp;</font>
                                <font v-for="item in get1type4">
                                    <a href="#" @click="get1s(item)">{{item}}</a>&nbsp;&nbsp;|&nbsp;
                                </font><br> 
                                <font style="font-size: 20px;">主题:&nbsp;&nbsp;</font>
                                <font v-for="item in get1type5">
                                    <a href="#" @click="get1s(item)">{{item}}</a>&nbsp;&nbsp;|&nbsp;
                                </font><br> 
                            </div>
                            <div id="menu1_2">
                                <div id="menu1_2_">
                                    <div id= "menu1_2_1" v-for="(item,index) in get1_3">                                
                                        <a href="#"><img :src="item.coverImgUrl+'?param=130y130'":title=item.name class="coverImgUrl2"@click="get1music(item)"></a><br>
                                        <a href="#" @click="get1music(item)"style="margin-bottom:0px">{{item.name}}</a>                               
                                    </div>
                                </div>
                                <div id="menu1_2_2">
                                    <a href="#st1"@click="get1offsettop">首页&nbsp;&nbsp;</a>
                                    <a href="#st1"><font v-show="get1offset>0"@click="get1offsetsub">上一页</font></a>  
                                    <span v-for="cound in get1page">
                                        <a href="#st1" :class="{newget1page:((get1offset+1)==cound)}" v-if="get1offset+5>=cound&&cound>=get1offset-3" @click="get1offsetpage(cound)">{{cound}}&nbsp;&nbsp;</a>
                                    </span>
                                    <a href="#st1"><font v-show="get1total>(get1offset*48+48)" @click="get1offsetadd">下一页</font></a>
                                    <a href="#st1"@click="get1offsetbot">&nbsp;&nbsp;尾页&nbsp;&nbsp;</a>
                                    <font>第</font>
                                    <input id="get1jump" type="text" :placeholder="get1offset+1"onafterpaste="this.value=this.value.replace(/\D/g,'')" onkeyup="this.value=this.value.replace(/\D/g,'')" style="width:20px;"@keyup.enter="get1jump">
                                    <font>页&nbsp;&nbsp;共有{{get1page}}页</font>
                                </div>
                            </div>
                        </div>
                        <div v-show="isViewget1">
                            <div style="float: left;">
                                <div>
                                    <a href="#" @click="returnmenu1"><font style="font-size: 20px;"title="返回歌单">返回歌单</font></a>  
                                </div>
                                <div id="menu1_3_1">
                                    <img :src="get1_4.coverImgUrl+'?param=130y130'"width="150px"height="150px" :title=get1_4.name><br>
                                    <font :title=get1_4.name>{{get1_4.name}}</font><br>
                                </div>
                                <div id="menu1_3_2">
                                    <center><h3>简介</h3></center>
                                    <div id="menu1_3_2_">
                                        <font :title=get1_4.description>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{get1_4.description}}</font><br>
                                    </div>
                                </div>
                            </div>
                            <div id="menu1_3_3">
                                <div style="margin-bottom: 50px;">
                                    <font id="p6" style="padding-left: 60px;">歌名</font>
                                    <font id="p6" style="padding-left: 315px;">歌手</font>
                                    <font id="p6" style="padding-left: 210px;">MV</font>
                                    <font id="p6" style="padding-left: 110px;">时长</font>
                                </div>
                                <dl class="dl5">
                                    <dt v-for="(item,index) in get1_4.tracks" class="dt5">       
                                        <div id="menu1name"style="text-overflow:ellipsis;white-space:nowrap;">
                                            <font style="padding-left: 25px;">{{index+1}}.</font>
                                            <a href="#" @click="playMusic(item)":title="item.name"><font>{{item.name}}</font></a>
                                        </div>
                                        <div id="menu1songer"style="text-overflow:ellipsis;white-space:nowrap;">
                                            <a href="#"><font v-for="items in item.ar" @click="changeName(items.name)" :title="items.name">{{items.name}}&nbsp;&nbsp;</font></a>             
                                        </div>
                                        <div id="menu1mv" >
                                            <a href="#"><img style="vertical-align: middle;" src="./mv.png" title="点击播放MV" width="30px" height="25px"  v-if="item.mvid!=0" @click="playMv(item)"style="padding-left:15px;"></a>                                                                                   
                                        </div>                                                                  
                                        <div id="menu1time"><font>{{item.duration}}</font></div>                                                                                  
                                        <br>                    
                                    </dt>
                                </dl>
                            </div>
                        </div> 
                    </div>
                    <div id="menu2" v-if="ismenu2">
                        <div id="menu2_1" v-show="!isViewget2music">
                            <div id="menu2left">
                                <div id="menu2search">
                                </div>
                                <div id="menu2left1">
                                    <font>地区</font><br>
                                    <a href="#"@click="get2s('-1',get2type,get2initial)":class="{newget1page:(get2area=='-1')}">全部</a><br>
                                    <a href="#"@click="get2s('7',get2type,get2initial)":class="{newget1page:(get2area=='7')}">华语</a><br>
                                    <a href="#"@click="get2s('96',get2type,get2initial)":class="{newget1page:(get2area=='96')}">欧美</a><br>
                                    <a href="#"@click="get2s('8',get2type,get2initial)":class="{newget1page:(get2area=='8')}">日本</a><br>
                                    <a href="#"@click="get2s('16',get2type,get2initial)":class="{newget1page:(get2area=='16')}">韩国</a><br>
                                    <a href="#"@click="get2s('0',get2type,get2initial)":class="{newget1page:(get2area=='0')}">其他</a>               
                                </div>
                                <div id="menu2left2">
                                    <font>类型</font><br>
                                    <a href="#"@click="get2s(get2area,'-1',get2initial)":class="{newget1page:(get2type=='-1')}">全部</a><br>
                                    <a href="#"@click="get2s(get2area,'1',get2initial)":class="{newget1page:(get2type=='1')}">男歌手</a><br>
                                    <a href="#"@click="get2s(get2area,'2',get2initial)":class="{newget1page:(get2type=='2')}">女歌手</a><br>
                                    <a href="#"@click="get2s(get2area,'3',get2initial)":class="{newget1page:(get2type=='3')}">乐队</a><br>
                                </div>
                            </div>                 
                            <div id="menu2right1">
                                <a href="#"@click="get2s(get2area,get2type,'0')"style="margin-left: 20px;":class="{newget1page:(get2initial=='0')}">全部</a>
                                <a href="#" v-for="item in get2initials" style="margin-left: 25px;" @click="get2s(get2area,get2type,item)":class="{newget1page:(get2initial==item)}">{{item}}</a>
                            </div>
                            <div id="menu2right2">
                                <div id="menu2right2_1">
                                    <font id="st2">&nbsp;</p>
                                    <div id= "menu1_2_1" v-for="(item,index) in get2songer">                                
                                        <a href="#"><img :src="item.picUrl+'?param=130y130'" :title=item.name class="coverImgUrl"@click="get2music(item)"></a><br>
                                        <a href="#" @click="get2music(item)" style="padding-bottom:0px;">{{item.name}}</a>                               
                                    </div>                            
                                    <a href="#st2" style="position: absolute;top:200px;left: 1305px;font-size: 18px;width:100px;">置顶</a>
                                    <a href="#st2" @click="get2ssub"style="position: absolute;top:545px;left: 1300px;font-size: 18px;width:100px;" v-show="get2offset>0">前一页</a>
                                    <a href="#st2" @click="get2sadd"style="position: absolute;top:580px;left: 1300px;font-size: 18px;width:100px;">换一批</a>
                                </div>
                            </div>
                        </div>
                        <div id="menu2_2" v-show="isViewget2music">
                            <div id="menu2_2_1">
                                <div style="float: left;">
                                    <div>
                                        <a href="#" @click="returnmenu2"><font style="font-size: 20px;"title="返回歌手">返回歌手</a></font>
                                        <a href="#":class="{newget1page:(get2musictype=='time')}" @click="get2ss('time')"><font style="font-size: 20px;margin-left:60px;">最新</font></a>
                                        <a href="#":class="{newget1page:(get2musictype=='hot')}" @click="get2ss('hot')"><font style="font-size: 20px;">&nbsp;热门</font></a>                                         
                                    </div>
                                    <div id="menu2_3_1">
                                        <img :src="get2newsonger.picUrl"width="150px"height="150px" :title=get2newsonger.name><br>
                                        <font :title=get2newsonger.name>{{get2newsonger.name}}</font><br>
                                    </div>
                                    <div id="menu2_3_2">
                                        <center><h3>简介</h3></center>
                                        <div id="menu2_3_2_">
                                            <font :title=get2smessages.briefDesc>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{get2smessages.briefDesc}}</font><br>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div id="menu2_2_2">
                                <font id="p6" style="padding-left: 60px;">歌名</font>
                                <font id="p6" style="padding-left: 315px;">歌手</font>
                                <font id="p6" style="padding-left: 210px;">MV</font>
                                <font id="p6" style="padding-left: 110px;">时长</font>
                                <div id="menu2_2_2_1">
                                    <dl class="dl5">
                                        <font id="st2_"></font>
                                        <dt v-for="(item,index) in get2songermusic" class="dt5">       
                                            <div id="menu1name"style="text-overflow:ellipsis;white-space:nowrap;">
                                                <font style="padding-left: 25px;">{{index+1+(get2musicoffset*30)}}.</font>
                                                <a href="#" @click="playMusic(item)":title="item.name"><font>{{item.name}}</font></a>
                                            </div>
                                            <div id="menu1songer"style="text-overflow:ellipsis;white-space:nowrap;">
                                                <a href="#"><font v-for="items in item.ar" @click="changeName(items.name)":title="items.name">{{items.name}}&nbsp;&nbsp;</font></a>             
                                            </div>
                                            <div id="menu1mv">
                                                <a href="#"><img style="vertical-align: middle;" src="./mv.png" title="点击播放MV" width="30px" height="25px"  v-if="item.mvid!=0" @click="playMv(item)"></a>                                                                                                                                                                                             
                                            </div>
                                            <div id="menu1time"><font>{{item.duration}}</font></div>                                                                                  
                                            <br>                    
                                        </dt>
                                    </dl>
                                </div>
                                <div id="menu2_2_2_2">
                                    <a href="#st2_" @click="get2offsettop">首页&nbsp;&nbsp;</a>
                                    <a href="#st2_"><font v-show="get2musicoffset>0"@click="get2offsetsub">上一页</font></a>  
                                    <span v-for="cound in get2page">
                                        <a href="#st2_" :class="{newget1page:((get2musicoffset+1)==cound)}" v-if="get2musicoffset+5>=cound&&cound>=get2musicoffset-3" @click="get2offsetpage(cound)">{{cound}}&nbsp;&nbsp;</a>
                                    </span>
                                    <a href="#st2_"><font v-show="get2musictotal>(get2musicoffset*30+30)" @click="get2offsetadd">下一页</font></a>
                                    <a href="#st2_"@click="get2offsetbot">&nbsp;&nbsp;尾页&nbsp;&nbsp;</a>
                                    <font>第</font>
                                    <input id="get2jump" type="text" :placeholder="get2musicoffset+1"onafterpaste="this.value=this.value.replace(/\D/g,'')" onkeyup="this.value=this.value.replace(/\D/g,'')" style="width:20px;"@keyup.enter="get2jump">
                                    <font>页&nbsp;&nbsp;共有{{get2page}}页</font>
                                </div>  
                            </div>
                        </div>
                    </div>
                    <div id="menu3" v-if="ismenu3">
                        <div v-show="!isViewget3">
                            <div id="menu3_1_1">
                                <font style="font-size: 22px;">类型:&nbsp;</font>
                                <a href="#st3" @click="get3s(get3area,'全部',get3order)" :class="{newget1page:(get3type=='全部')}">全部</a>&nbsp;
                                <a href="#st3" @click="get3s(get3area,'官方版',get3order)" :class="{newget1page:(get3type=='官方版')}">官方版</a>&nbsp;
                                <a href="#st3" @click="get3s(get3area,'原生',get3order)" :class="{newget1page:(get3type=='原生')}">原生</a>&nbsp;
                                <a href="#st3" @click="get3s(get3area,'现场版',get3order)" :class="{newget1page:(get3type=='现场版')}">现场版</a>&nbsp;
                                <a href="#st3" @click="get3s(get3area,'网易出品',get3order)" :class="{newget1page:(get3type=='网易出品')}">网易出品</a>&nbsp;                
                                <font style="font-size: 22px;">|&nbsp;地区:&nbsp;</font>
                                <a href="#st3" @click="get3s('全部',get3type,get3order)" :class="{newget1page:(get3area=='全部')}">全部</a>&nbsp;
                                <a href="#st3" @click="get3s('内地',get3type,get3order)" :class="{newget1page:(get3area=='内地')}">内地</a>&nbsp;
                                <a href="#st3" @click="get3s('港台',get3type,get3order)" :class="{newget1page:(get3area=='港台')}">港台</a>&nbsp;
                                <a href="#st3" @click="get3s('欧美',get3type,get3order)" :class="{newget1page:(get3area=='欧美')}">欧美</a>&nbsp;
                                <a href="#st3" @click="get3s('日本',get3type,get3order)" :class="{newget1page:(get3area=='日本')}">日本</a>&nbsp;
                                <a href="#st3" @click="get3s('韩国',get3type,get3order)" :class="{newget1page:(get3area=='韩国')}">韩国</a>&nbsp;
                                <font style="font-size: 22px;">|&nbsp;排序:&nbsp;</font>
                                <a href="#st3" @click="get3s(get3area,get3type,'上升最快')" :class="{newget1page:(get3order=='上升最快')}">上升最快</a>&nbsp;
                                <a href="#st3" @click="get3s(get3area,get3type,'最新')" :class="{newget1page:(get3order=='最新')}">最新</a>&nbsp;
                                <a href="#st3" @click="get3s(get3area,get3type,'最热')" :class="{newget1page:(get3order=='最热')}">最热</a>
                            </div>
                            <div id="menu3_1_2">
                                <div id="menu3_1_2_">
                                    <font id="st3">&nbsp;</font>
                                    <div>
                                        <div id= "menu3_1_2_1" v-for="(item,index) in get3MV">                                
                                            <a href="#"><img :src="item.cover" :title=item.name class="coverImgUrl3"@click="get3MVid(item)"></a><br>
                                            <a href="#" @click="get3MVid(item)">{{item.name}}</a><br>
                                            <a href="#" @click="get3MVid(item)"style="margin-bottom:0px;font-weight:100;">{{item.artistName}}</a>                                 
                                        </div>
                                    </div>
                                    <div id="menu3_1_2_2">
                                        <a href="#st3" @click="get3sub" v-show="get3offset>0"style="font-size: 18px; float: left; margin-left:22%">前一页</a>
                                        <a href="#st3" @click="get3add" style="font-size: 18px; float: right; margin-right:30%">换一批</a>
                                    </div>
                                </div>                                
                            </div>                           
                        </div>
                        <div v-show="isViewget3">               
                        </div> 
                    </div>              
                    <div id="menu4" v-if="ismenu4">
                        <div id="menu4_1"v-show="!isViewget4">
                            <div id= "menu4_1_" v-for="(item,index) in get4list">                                
                                <a href="#"><img :src="item.coverImgUrl+'?param=130y130'" :title=item.name class="coverImgUrl2"@click="get4music(item)"></a><br>
                                <a href="#" :title=item.name @click="get4music(item)"style="margin-bottom:0px">{{item.name}}</a>                               
                            </div>
                        </div>
                        <div v-show="isViewget4">
                            <div style="float: left;">
                                <div>
                                    <a href="#" @click="returnmenu4"><font style="font-size: 20px;"title="返回榜单">返回榜单</font></a>  
                                </div>
                                <div id="menu4_2_1">
                                    <img :src="get4nowlist.coverImgUrl+'?param=130y130'"width="150px"height="150px" :title=get4nowlist.name><br>
                                    <font :title=get4nowlist.name>{{get1_4.name}}</font><br>
                                </div>
                                <div id="menu4_2_2">
                                    <center><h3>简介</h3></center>
                                    <div id="menu4_2_2_">
                                        <font :title=get4nowlist.description>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{get4nowlist.description}}</font><br>
                                    </div>
                                </div>
                            </div>
                            <div id="menu4_3">
                                <font id="p6" style="padding-left: 60px;">歌名</font>
                                <font id="p6" style="padding-left: 315px;">歌手</font>
                                <font id="p6" style="padding-left: 210px;">MV</font>
                                <font id="p6" style="padding-left: 110px;">时长</font>
                                <div id="menu4_3_">
                                    <dl class="dl5">
                                        <dt v-for="(item,index) in get4playlist" class="dt5">       
                                            <div id="menu1name"style="text-overflow:ellipsis;white-space:nowrap;">
                                                <font style="padding-left: 25px;">{{index+1}}.</font>
                                                <a href="#" @click="playMusic(item)":title="item.name"><font>{{item.name}}</font></a>
                                            </div>
                                            <div id="menu1songer"style="text-overflow:ellipsis;white-space:nowrap;">
                                                <a href="#"><font v-for="items in item.ar" @click="changeName(items.name)" :title="items.name">{{items.name}}&nbsp;&nbsp;</font></a>             
                                            </div>
                                            <div id="menu1mv">
                                                <a href="#"><img style="vertical-align: middle;" src="./mv.png" title="点击播放MV" width="30px" height="25px"  v-if="item.mvid!=0" @click="playMv(item)"></a>         
                                            </div>
                                            <div id="menu1time"><font>{{item.duration}}</font></div>                                                                                  
                                            <br>                    
                                        </dt>
                                    </dl>
                                </div>                         
                            </div>
                        </div> 
                    </div>
                </div>
                <div v-show="!isViewmenu">
                    <div id="content_left">
                        <div id="content_left_0"v-show="newList.length>0">
                            <font id="p1" v-show="newList.length!=0">&nbsp;&nbsp;播放列表:{{newList.length}}首</font>
                        </div>
                        <div id="content_left_">
                            <dl class="dl1">
                                <dt v-for="(item,index) in newList" class="dt1" :class="{newplay:(newId==item.id)}">      
                                    <div id="content_left_1" :class="{cantplay:(item.id==item.mvid)}">
                                        <div id="ar"style="text-overflow:ellipsis;white-space:nowrap;">
                                            <span>&nbsp;{{index+1}}.</span>
                                            <a href="javascript:;" :title=item.name @click="playMusicAgain(item)">{{item.name}}—</a>
                                            <a v-for="(items,index) in item.artists" v-if="index==0" :title=item.name+items.name href="javascript:;"@click="changeName_artist(items.name)">{{items.name}}</a>
                                        </div>
                                        <div id="time"style="text-overflow:ellipsis;white-space:nowrap;"><font>{{item.duration}}</font></div>                                                                                       
                                    </div>                                                          
                                    <div id="content_left_2">         
                                        <a href="#"><img src="./mv.png"title="点击播放MV" width="18px" height="20px" class="mvButton"v-if="item.mvid!=0"@click="playMvAgain(item)"></a>
                                        <a href="#"><img src="./img/搜索.png" title="点击搜索歌曲" width="18px" height="20px" @click="changeName_music(item.name)"></a>
                                        <a href="#"><img src="./img/删除.png" title="删除歌曲"width="18px" height="18px"class="delButton"@click="del(index)"></a>
                                    </div> 
                                    <br>                    
                                </dt>
                            </dl>
                        </div>                                    
                    </div>
                    <div id="content_middle">    
                        <div id="view1_top"v-if="isView1">
                            <font id="p3" v-show="songCount!=0">搜索结果共{{songCount}}条:</font>
                        </div>
                        <div id="view1_middle"v-if="isView1">
                            <font id="p4" style="padding-left: 15px;">序号</font>
                            <font id="p4" style="padding-left: 90px;">歌曲名</font>
                            <font id="p4" style="padding-left: 165px;">歌手</font>
                            <font id="p4" style="padding-left: 140px;">搜索</font>
                            <font id="p4" style="padding-left: 23px;">播放</font>
                            <font id="p4" style="padding-left: 21px;">MV</font>
                            <font id="p4" style="padding-left: 25px;">时长</font>
                        </div>
                        <div id="view1"v-if="isView1">                                              
                            <p id="p2"v-show="isView2"><a href="javascript:;"@click="Return">返回歌曲信息</a></p>
                            <p id="p2"v-show="isView5"><a href="javascript:;"@click="Return_">返回歌曲MV</a></p>
                            <a href="#st"><img id="imgleft" src="img/左.png"width="30px" height="20px" :title=HL[hl-L-1] v-if="HL.length>1&&hl-L>0" @click="changeName(HL[hl-(++L)])"></a>
                            <a href="#st"><img id="imgright" src="img/右.png"width="30px" height="20px" :title=HL[hl-L+1] v-if="HL.length>hl+1-L" @click="changeName(HL[hl-(--L)])"></a>                                       
                            <font id="st"></font>
                            <dl class="dl2">         
                                <dt v-for="(item,index) in musicList" class="dt2">
                                    <div id="number"style="text-overflow:ellipsis;white-space:nowrap;">
                                        <span>&nbsp;{{(offset*50)+index+1}}</span>
                                    </div>                                 
                                    <div id="name"style="text-overflow:ellipsis;white-space:nowrap;">     
                                        <a href="javascript:;" :title=item.name @click="playMusic(item)">{{item.name}}</a> 
                                    </div>                                        
                                    <div id="songer"style="text-overflow:ellipsis;white-space:nowrap;">                                       
                                        <a v-for="items in item.artists" :title=items.name href="javascript:;"@click="changeName_artist(items.name)">{{items.name}}&nbsp;&nbsp;</a>                                          
                                    </div> 
                                    <div id="operation">
                                        <img src="./img/搜索.png" title="点击搜索歌曲" width="24px" height="20px" @click="changeName_music(item.name)">
                                        <img src="./播放.png" title="点击播放歌曲" width="24px" height="20px" @click="playMusic(item)"style="padding-left:30px;">
                                        <img src="./mv.png" title="点击播放MV" width="24px" height="20px"  v-if="item.mvid!=0" @click="playMv(item)"style="padding-left:30px;"> 
                                    </div>     
                                    <div id="duration">
                                        {{item.duration}}
                                    </div> 
                                    <br>                                                                             
                                </dt>                                                                      
                            </dl>
                            <div id="view1_bot">
                                <a href="#st" @click="offsettop">首页&nbsp;&nbsp;</a>
                                <a href="#st"><font v-if="offset>0"@click="offsetsub">上一页&nbsp;&nbsp;</font></a>  
                                <span v-for="cound in page">
                                    <a href="#st" :class="{newget1page:((offset+1)==cound)}" v-if="offset+5>=cound&&cound>=offset-3" @click="offsetpage(cound)">{{cound}}&nbsp;&nbsp;</a>
                                </span>
                                <a href="#st"><font v-show="songCount>(offset*50+50)" @click="offsetadd">下一页</font></a>
                                <a href="#st"@click="offsetbot">&nbsp;&nbsp;尾页&nbsp;&nbsp;</a>
                                <font>第</font>
                                <input id="jump" type="text" :placeholder="offset+1"onafterpaste="this.value=this.value.replace(/\D/g,'')" onkeyup="this.value=this.value.replace(/\D/g,'')" style="width:20px;"@keyup.enter="jump">
                                <font>页&nbsp;&nbsp;共有{{page}}页</font>  
                            </div>             
                        </div> 
                        <div id="view2"v-show="!isView1">
                            <p id="p2"v-show="isView2&&isdoit"><a href="javascript:;"@click="Return__">返回搜索结果</a></p>
                            <div id="view2_">
                                <div id="view2_1"v-show="!isView3">  
                                    <div v-show="!isViewcover" @click="viewcover">
                                        <a href="#"><font style="font-size: 24px;line-height: 50px;"  v-for="(item,index) in Lyric" :class="{newget1page:(keyIndex==index)}" :title="item"  @click="changetime(index)" v-if="(index>=keyIndex-5&&keyIndex>=index-5)||(10>=index&&5>=keyIndex)">{{item}}<br></font></a>
                                    </div>    
                                    <div id="cover"v-show="isViewcover">
                                        <a href="#"><img :src="musicCover" :title=newName id="musicCover":class="{musicCover:isPlaying}" @click="viewcover"></a>
                                        <p id="p5"><a href="javascript:;"@click="changeName(newName)">{{newName}}</a></p>     
                                    </div>                                                            
                                </div>                              
                                <div v-show="isView3">
                                    <p id="p9"v-show="isView5&&isdoit"><a href="javascript:;"@click="Return">返回搜索结果</a></p> 
                                    <video :src="mvUrl"id="video1"class="Video"controls="controls"autoplay></video>
                                </div>
                            </div>
                        </div>                        
                    </div>
                    <div id="content_right">
                        <div id="content_right_"v-show="isPlay||isView3">
                            <div id="content_right_0">
                                <font id="p1">热门评论:</font>
                            </div>  
                            <div id="content_right_1">
                                <dl v-for="item in hotComments">
                                    <dt class="dt3">
                                        <img :src="item.user.avatarUrl" class="avatarUrl">
                                        <font>{{item.user.nickname}}</font>
                                    </dt>
                                    <dd id="p7">{{item.content}}</dd>              
                                </dl>
                            </div>                       
                        </div>
                    </div>
                </div>               
            </div>
            <div id="foot">
                <div id="foot_"v-show="isPlay&&!isView3">
                    <div id="play">
                        <!-- <div v-show="isPlaying">
                            <marquee behavior="scroll" onMouseOver="this.stop()"onMouseOut="this.start()">
                                <font id="p8">正在播放:</font>
                                <font id="p9">{{newName}}</font> 
                            </marquee>
                        </div> -->
                        <div>                  
                            <font >正在播放:</font>
                            <font >{{newName}}</font>          
                        </div>
                    </div>
                        <audio id="audio1" ref="audio" :src="musicUrl" @play="Play"@pause="Pause" controls autoplay loop class="myaudio">
                    </audio>
                </div>            
            </div>
        </div>
    </div>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
    el: "#app",
    data: {
        musicName: "",  //搜索歌曲名称
        isdoit: false,//修复直接由乐库播放歌曲产生的bhg
        isView1: false, //搜索结果与歌曲信息只出现一个
        isView2: false, //搜索结果与歌曲信息切换按钮
        isView3: false, //是否出现歌曲MV
        isView4: false, //查询历史记录
        isView5: false, //搜索结果与歌曲MV切换
        isViewmenu: true,//菜单
        isViewget1: false,//显示歌单歌曲
        ismenu1: false,
        ismenu1_1: false,
        ismenu2: false,
        isViewget2music: false,//显示歌手歌曲
        ismenu3: false,
        isViewget3: false,
        isViewget4: false,
        ismenu4: false,
        isPlay: false,  //当前歌曲是否播放
        isViewcover:false,
        imgshow:false,
        musicList: [],  //搜索列表
        thisTime: "0",
        thisLyric: "",
        lyrictime: [],
        Lyric: [],
        Time: [],
        keyIndex:"0",
        type: "1",//搜索类型
        offset: "0",// 搜索列表偏移量（换页）
        page: "0", //搜索歌曲页数
        songCount: "0",
        HL: [], //当前的历史记录（短期）
        hl: "", //HL搜索历史的前后页面转换
        L: "0",  //搜索历史的前后页面转换偏移量
        historyList: [],  //搜索历史 （长期）
        newList: [],  //播放列表
        historynewList: [],  //储存播放列表
        newId: "",   //当前播放歌曲Id
        musicUrl: "",   //歌曲地址
        musicCover: "",  //歌曲封面
        newName: "",   //当前歌曲名字
        get1again: false,
        get2again: false,
        get3again: false,
        get4again: false,
        get1_1: "全部",  //获取歌单类型1
        get1_2: "hot",  //获取歌单类型2
        get1_3: [],  //获取歌单
        get1_4: [], //储存歌单歌曲
        get1total: "0",//歌单总数
        get1page: "",//歌单页数
        get1offset: "0",//歌单偏移量（换页）
        get1type1: ["华语", "欧美", "日语", "韩语", "粤语"],
        get1type2: ["流行", "摇滚", "民谣", "电子", "舞曲", "说唱", "轻音乐", "爵士", "乡村", "R&B/Soul", "古典", "民族", "英伦", "金属", "朋克", "蓝调", "雷鬼", "世界音乐", "拉丁", "New Age", "古风", "后摇", "Bossa Nova"],
        get1type3: ["清晨", "夜晚", "学习", "工作", "午休", "下午茶", "地铁", "驾车", "运动", "旅行", "散步", "酒吧"],
        get1type4: ["怀旧", "清新", "浪漫", "伤感", "治愈", "放松", "孤独", "感动", "兴奋", "快乐", "安静", "思念"],
        get1type5: ["综艺", "影视原声", "ACG", "儿童", "校园", "游戏", "70后", "80后", "90后", "网络歌曲", "KTV", "经典", "翻唱", "吉他", "钢琴", "器乐", "榜单", "00后"],
        get2type: "-1", //歌手类型
        get2area: "-1",//歌手地区
        get2initial: "0",//歌手首字母
        get2initials: [],//26字母表
        get2offset: "0",//歌手搜索偏移量
        get2songermusic: [],//储存歌手歌曲
        get2musicoffset: "0",
        get2musictotal: "0",
        get2musictype: "hot",
        get2page: "",
        get2songer: [],//储存歌手信息
        get2newsonger: [],
        get2smessages: [],
        get3area: "全部",
        get3type: "全部",
        get3order: "上升最快",
        get3offset: "0",
        get3MV: [],
        get3MVurl: "",
        get4list: [], //获取并储存榜单
        get4playlist: [], //获取并储存榜单歌曲
        get4nowlist: [],
        hotComments: [],  //热门评论
        isPlaying: false,  //当前歌曲是否播放
        mvUrl: "",  //mv地址
    },
    methods: {
        imgShow:function(){    //显示皮肤列表
            this.imgshow=!this.imgshow;
        },
        get1: function () {    //获得歌单界面
            this.ismenu1 = true;
            this.ismenu2 = false;
            this.ismenu3 = false;
            this.ismenu4 = false;
            if (this.get1again == false) {
                this.$options.methods.get1s.bind(this)(this.get1_1);
            }
        },
        get2: function () {    //获得歌手界面
            this.ismenu1 = false;
            this.ismenu2 = true;
            this.ismenu3 = false;
            this.ismenu4 = false;
            ;
            if (this.get2again == false) {
                this.$options.methods.get2s.bind(this)(this.get2area, this.get2type, this.get2initial)
            }
        },
        get3: function () {    //获得MV界面
            this.ismenu1 = false;
            this.ismenu2 = false;
            this.ismenu3 = true;
            this.ismenu4 = false;
            if (this.get3again == false) {
                this.$options.methods.get3ss.bind(this)(this.get3area, this.get3type, this.get3order);
            }
        },
        get4: function () {    //获得歌单类型
            this.ismenu1 = false;
            this.ismenu2 = false;
            this.ismenu3 = false;
            this.ismenu4 = true;
            if (this.get4again == false) {
                this.$options.methods.get4s.bind(this)();
            }
        },
        get1s: function (get) {  //获得歌单
            this.get1again = true;
            var that = this;
            //console.log(get);
            if (get != this.get1_1) {
                this.get1offset = 0;
            }
            if (get == "R&B/Soul") {
                axios.get("http://test.codeedu.com.cn/wangyiyun/top/playlist?order=" + this.get1_2 + "&cat=R%26B%2FSoul" + "&limit=48&offset=" + (this.get1offset * 48))
                    .then(function (response) {
                        that.get1_3 = response.data.playlists;
                        //console.log(response);
                        //console.log(that.get1_3);               
                        that.get1_1 = get;
                        that.get1total = response.data.total;
                        if (parseInt(that.get1total) % 48 == 0) {
                            that.get1page = (parseInt(that.get1total) / 48);
                        } else {
                            that.get1page = parseInt(parseInt(that.get1total) / 48) + 1;
                        }
                        //console.log(that.get1total);
                        //console.log(that.get1page);
                    }, function (err) { })
                that.ismenu1_1 = false;
            } else {
                axios.get("http://test.codeedu.com.cn/wangyiyun/top/playlist?order=" + this.get1_2 + "&cat=" + get + "&limit=48&offset=" + (this.get1offset * 48))
                    .then(function (response) {
                        that.get1_3 = response.data.playlists;
                        //console.log(response);
                        //console.log(that.get1_3);               
                        that.get1_1 = get;
                        that.get1total = response.data.total;
                        if (parseInt(that.get1total) % 48 == 0) {
                            that.get1page = (parseInt(that.get1total) / 48);
                        } else {
                            that.get1page = parseInt(parseInt(that.get1total) / 48) + 1;
                        }
                        //console.log(that.get1total);
                        //console.log(that.get1page);
                    }, function (err) { })
                that.ismenu1_1 = false;
            }
        },
        //下列分别是首页、上一页、下一页、尾页、改变最新或热门类型、页数跳转、显示歌单
        get1offsettop: function () {
            this.get1offset = 0;
            this.$options.methods.get1s.bind(this)(this.get1_1);
        },
        get1offsetsub: function () {
            this.get1offset--;
            this.$options.methods.get1s.bind(this)(this.get1_1);
        },
        get1offsetadd: function () {
            this.get1offset++;
            this.$options.methods.get1s.bind(this)(this.get1_1);
        },
        get1offsetbot: function () {
            this.get1offset = this.get1page - 1;
            //console.log(this.get1offset);
            this.$options.methods.get1s.bind(this)(this.get1_1);
        },
        get1offsetpage: function (c) {
            if (c != this.get1offset + 1) {
                this.get1offset = c - 1;
                this.$options.methods.get1s.bind(this)(this.get1_1);
            }
        },
        get1ss: function (type) {
            this.get1offset = 0;
            this.get1_2 = type;
            this.$options.methods.get1s.bind(this)(this.get1_1);
        },
        get1jump: function () {
            var a = document.getElementById("get1jump").value;
            if (a > this.get1page) {
                a = this.get1page;
            }
            if (a <= 0) {
                a = 1;
            }
            this.get1offset = a - 1;
            this.$options.methods.get1s.bind(this)(this.get1_1);
        },
        isViewmenu1_1: function () {
            this.ismenu1_1 = !this.ismenu1_1;
            //console.log(this.ismenu1_1);
        },
        get1music: function (item) { //获取歌单里的歌曲
            var that = this;
            axios.get("http://test.codeedu.com.cn/wangyiyun/playlist/detail?id=" + item.id)
                .then(function (response) {
                    //console.log(response);
                    that.get1_4 = response.data.playlist;
                    //console.log(that.get1_4)
                    //console.log(that.get1_4.tracks);
                    that.isViewget1 = true;
                    for (i = 0; i < that.get1_4.tracks.length; i++) {  //对歌曲时间数据进行转换得到正确格式
                        //console.log(that.musicList[i].duration)
                        var d = parseInt(that.get1_4.tracks[i].dt);
                        d = parseInt(d / 1000);
                        var m = parseInt(d / 60);
                        var s = d - 60 * m;
                        if (s < 10) {
                            s = "0" + s;
                        }
                        that.get1_4.tracks[i].duration = m + ":" + s;
                        that.get1_4.tracks[i].artists = that.get1_4.tracks[i].ar;
                        that.get1_4.tracks[i].mvid = that.get1_4.tracks[i].mv;
                    }
                }, function (err) { })
        },   //返回歌单
        returnmenu1: function () {
            this.isViewget1 = false;
        },     
        get2s: function (area, type, initial) {  //获取歌手
            this.get2again = true;
            if (this.get2area != area || this.get2type != type || this.get2initial != initial) {
                this.get2offset = 0;
            }
            //console.log("offset="+this.get2offset);
            var that = this;
            if (initial == 0) {
                axios.get("http://test.codeedu.com.cn/wangyiyun/artist/list?type=" + type + "&area=" + area + "&limit=50&offset=" + (this.get2offset * 50))
                    .then(function (response) {
                        //console.log(response);
                        that.get2songer = response.data.artists;
                    }, function (err) { })
            } else {
                axios.get("http://test.codeedu.com.cn/wangyiyun/artist/list?type=" + type + "&area=" + area + "&limit=50&initial=" + initial + "&offset=" + (this.get2offset * 50))
                    .then(function (response) {
                        //console.log(response);
                        that.get2songer = response.data.artists;
                    }, function (err) { })
            }
            //console.log(that.get2songer);                  
            that.get2area = area;
            that.get2type = type;
            that.get2initial = initial;
        },
        get2ssub: function () {    //上一页
            this.get2offset--;
            //console.log("offset="+this.get2offset);
            this.$options.methods.get2s.bind(this)(this.get2area, this.get2type, this.get2initial);

        },
        get2sadd: function () {    //下一页
            this.get2offset++;
            //console.log("offset="+this.get2offset);
            this.$options.methods.get2s.bind(this)(this.get2area, this.get2type, this.get2initial);

        },
        get2music: function (item) {   //获得歌手的歌曲
            var that = this;
            if (item != this.get2newsonger) {
                this.get2musicoffset = 0;
            }
            axios.get("http://test.codeedu.com.cn/wangyiyun/artist/songs?id=" + item.id + "&order=" + this.get2musictype + "&limit=30&offset=" + (this.get2musicoffset * 30))
                .then(function (response) {
                    //console.log(response);
                    that.get2songermusic = response.data.songs;
                    that.get2musictotal = response.data.total;
                    if (parseInt(that.get2musictotal) % 30 == 0) {
                        that.get2page = (parseInt(that.get2musictotal) / 30);
                    } else {
                        that.get2page = parseInt(parseInt(that.get2musictotal) / 30) + 1;
                    }
                    //console.log(that.get2songermusic);
                    //console.log(that.get2musictotal);
                    //console.log(that.get2page);
                    for (i = 0; i < that.get2songermusic.length; i++) {  //对歌曲时间数据进行转换得到正确格式                  
                        var d = parseInt(that.get2songermusic[i].dt);
                        d = parseInt(d / 1000);
                        var m = parseInt(d / 60);
                        var s = d - 60 * m;
                        if (s < 10) {
                            s = "0" + s;
                        }
                        that.get2songermusic[i].duration = m + ":" + s;
                        that.get2songermusic[i].artists = that.get2songermusic[i].ar;
                        that.get2songermusic[i].mvid = that.get2songermusic[i].mv;
                        //console.log(that.get2songermusic[i].duration);
                        //console.log(that.get2songermusic[i].artists);
                        //console.log(that.get2songermusic[i].mvid);
                        that.isViewget2music = true;
                    }
                }, function (err) { })
            that.get2newsonger = item;
            //console.log(that.get2newsonger);
            this.$options.methods.get2smessage.bind(this)(item);
        },
        get2smessage: function (item) {   //获得歌手信息
            var that = this;
            axios.get("http://test.codeedu.com.cn/wangyiyun/artist/desc?id=" + item.id)
                .then(function (response) {
                    //console.log(response);
                    that.get2smessages = response.data;
                    //console.log(that.get2smessages);
                }, function (err) { })
        },
        //下列分别是首页、上一页、下一页、尾页、点击页数跳转、页数跳转、改变最新或热门类型、显示歌手界面
        get2offsettop: function () {
            this.get2musicoffset = 0;
            this.$options.methods.get2music.bind(this)(this.get2newsonger);
        },
        get2offsetsub: function () {
            this.get2musicoffset--;
            this.$options.methods.get2music.bind(this)(this.get2newsonger);
        },
        get2offsetadd: function () {
            this.get2musicoffset++;
            this.$options.methods.get2music.bind(this)(this.get2newsonger);
        },
        get2offsetbot: function () {
            this.get2musicoffset = this.get2page - 1;
            //console.log(this.get2musicoffset);
            this.$options.methods.get2music.bind(this)(this.get2newsonger);
        },
        get2offsetpage: function (c) {
            if (c != this.get2musicoffset + 1) {
                this.get2musicoffset = c - 1;
                this.$options.methods.get2music.bind(this)(this.get2newsonger);
            }
        },
        get2jump: function () {
            var a = document.getElementById("get2jump").value;
            if (a > this.get2page) {
                a = this.get2page;
            }
            if (a <= 0) {
                a = 1;
            }
            this.get2musicoffset = a - 1;
            this.$options.methods.get2music.bind(this)(this.get2newsonger);
        },
        get2ss: function (type) {
            if (this.get2musictype != type) {
                this.get2musictype = type;
                this.get2musicoffset = 0;
                this.$options.methods.get2music.bind(this)(this.get2newsonger);
            }
        },
        returnmenu2: function () {
            this.isViewget2music = false;
        },
        get3s: function (area, type, order) {  //防止点击同种类型重复请求
            if (this.get3area != area || this.get3type != type || this.get3order != order) {
                this.$options.methods.get3ss.bind(this)(area, type, order);
            }
        },
        get3ss: function (area, type, order) {  //获得MV
            this.get3again = true;
            if (this.get3area != area || this.get3type != type || this.get3order != order) {
                this.get3offset = 0;
            }
            //console.log("offset="+this.get3offset);
            var that = this;
            axios.get("http://test.codeedu.com.cn/wangyiyun/mv/all?&type=" + type + "&area=" + area + "&order=" + order + "&limit=30&offset=" + (this.get3offset * 30))
                .then(function (response) {
                    //console.log(response);
                    that.get3MV = response.data.data;
                    //console.log(that.get3MV);
                }, function (err) { })
            that.get3area = area;
            that.get3type = type;
            that.get3order = order;
            //console.log("offset=" + this.get3offset);
        },
        get3sub: function () {   //上一页
            this.get3offset--;
            this.$options.methods.get3ss.bind(this)(this.get3area, this.get3type, this.get3order);
        },
        get3add: function () {   //下一页
            this.get3offset++;
            this.$options.methods.get3ss.bind(this)(this.get3area, this.get3type, this.get3order);
        },
        get3MVid: function (item) {    //获得MVid
            item.mvid = item.id;
            //console.log(item.mvid);
            var d = parseInt(item.duration);
            d = parseInt(d / 1000);
            var m = parseInt(d / 60);
            var s = d - 60 * m;
            if (s < 10) {
                s = "0" + s;
            }
            item.duration = m + ":" + s;
            this.$options.methods.playMv.bind(this)(item);
        },
        get4s: function () {    //获得榜单
            var that = this;
            axios.get("http://test.codeedu.com.cn/wangyiyun/toplist")
                .then(function (response) {
                    //console.log(response);
                    that.get4list = response.data.list;
                }, function (err) { })
        },
        get4music: function (item) {   //获得榜单音乐
            var that = this;
            axios.get("http://test.codeedu.com.cn/wangyiyun/top/list?id=" + item.id)
                .then(function (response) {
                    //console.log(response);
                    that.get4playlist = response.data.playlist.tracks;
                    for (i = 0; i < that.get4playlist.length; i++) {
                        var d = parseInt(that.get4playlist[i].dt);
                        d = parseInt(d / 1000);
                        var m = parseInt(d / 60);
                        var s = d - 60 * m;
                        if (s < 10) {
                            s = "0" + s;
                        }
                        that.get4playlist[i].duration = m + ":" + s;
                        that.get4playlist[i].artists = that.get4playlist[i].ar;
                        that.get4playlist[i].mvid = that.get4playlist[i].mv;
                    }
                    //console.log(that.get4playlist);
                    that.isViewget4 = true;
                }, function (err) { })
            that.get4nowlist = item;
        },
        returnmenu4: function () {    //显示榜单界面
            this.isViewget4 = false;
        },
        gethistoryList: function () {  //获取历史记录信息
            // for(i=0;i<localStorage.length;i++){
            //     //console.log(i);
            //     if(localStorage.getItem(i)!="null"){
            //         this.historyList[i]=localStorage.getItem(i);
            //         //console.log("localStorage"+localStorage.getItem(i));
            //     }                     
            //     //console.log("historyList"+this.historyList[i]);           
            // } 
            // //console.log("historyList.length="+this.historyList.length);
            // //console.log("localStorage.length"+localStorage.length);
            this.isView4 = !this.isView4;  //打开历史记录
            //console.log("isView4"+this.isView4);
        },
        disappear: function () {   //显示历史记录
            this.isView4 = false;
        },
        clearHistoryList: function () {   //清空历史记录
            this.historyList = [];
            this.isView4=false;
            localStorage.setItem("historyList", JSON.stringify(this.historyList));

        },
        doit1: function () {    //没有用，方便控制台查看
            for (i = 0; i < this.historyList.length; i++) {
                //console.log(i);
                //console.log("historyList" + this.historyList[i]);
            }
            for (i = 0; i < localStorage.length; i++) {
                //console.log(i);
                //console.log("localStorage" + localStorage.getItem(i));
            }
        },
        changemenu: function () {   //显示menu界面
            this.isViewmenu = !this.isViewmenu;
        },
        playMusic: function (item) {//播放歌曲
            if(this.newId != item.id){
                var that = this;
                this.$options.methods.playMusicAgain.bind(this)(item);
                //将该歌曲放入播放列表
                if (that.newList.length == 0) {   //播放列表为空直接将该歌曲放入播放列表
                    that.newList.push(item);
                } else {
                    for (i = 0; i < that.newList.length; i++) {  //防止该歌曲重复放入该播放列表
                        if (item.id == that.newList[i].id) {
                            break;
                        }
                        if (i == that.newList.length - 1) {
                            that.newList.push(item);
                        }
                    }
                }
                localStorage.setItem("newList", JSON.stringify(that.newList));
            }              
        },
        playMusicAgain: function (item) {   //从播放列表里选择播放歌曲
            if(this.newId != item.id){
                var that = this;
            if (item.id != item.mvid) {
                axios.get("http://test.codeedu.com.cn/wangyiyun/song/url?id=" + item.id)
                    .then(function (response) {
                        //console.log(response.data.data[0].url);
                        that.musicUrl = response.data.data[0].url;
                    }, function (err) { })
                axios.get("https://autumnfish.cn/song/detail?ids=" + item.id)
                    .then(function (response) {
                        //console.log(response.data.songs[0].al.picUrl);
                        that.musicCover = response.data.songs[0].al.picUrl;
                    }, function (err) {
                        //console.log(err);
                    })
                axios.get("http://test.codeedu.com.cn/wangyiyun/comment/music?id=" + item.id)
                    .then(function (response) {
                        //console.log(response);
                        that.hotComments = response.data.hotComments;
                    })
                axios.get("http://test.codeedu.com.cn/wangyiyun/lyric?id=" + item.id)
                    .then(function (response) {
                        //console.log(response);
                        that.Time=[];   //清空（防止上一曲歌曲的干扰）
                        that.Lyric=[];  //清空（防止上一曲歌曲的干扰）
                        if(response.data.lrc.lyric!=null){
                            that.thisLyric = response.data.lrc.lyric;
                            that.lyrictime = that.thisLyric.split("\n");  //拆分原歌词文本
                            // //console.log("thisLyric" + that.thisLyric);
                            // //console.log("that.lyrictime" + that.lyrictime);
                            //let lrcexp = new Reg
                            var tempor=[];
                            var min;
                            var s;
                            var allTime=[];
                            var lyr=[];
                            var lyrs=[];
                            for(var i=0; i<that.lyrictime.length; i++) {
                                tempor=that.lyrictime[i];  
                                //console.log("tempor: "+i+" = "+tempor);
                                min=tempor[2];  //取出时间分（笨办法，但是很快啊，不用闪）
                                s=tempor[4]+tempor[5]+tempor[6]+tempor[7];    //取出时间秒（笨办法，但是很快啊，不用闪）
                                allTime.push(parseFloat(s)+parseFloat(min)*60);  //把时间转换为秒的格式（这个精准到秒后一位）
                                lyr[i]=that.lyrictime[i].match(/(?<=])([^"]+)(?=)/g);  //正则表达式获得歌词内容
                                if(lyr[i]!=null){
                                    //console.log(lyr[i][0]);
                                    lyrs.push(lyr[i][0]);
                                }else{
                                    lyrs.push(null);
                                }
                            }
                            that.Time=allTime; //把得到的时间放在Time数组里面
                            that.Lyric=lyrs;  //把得到的歌词放在Lyric数组里面
                            for(i=0;i<that.Lyric.length;i++){
                                if(that.Lyric[i]==null){
                                    that.Lyric.splice(i, 1);
                                    that.Time.splice(i, 1);
                                }
                            }
                        }      
                        //console.log(lyrs);
                        //console.log(that.Lyric);
                        //console.log(that.Time);
                    })
                that.isView1 = false;   //搜索页面关闭
                that.isView2 = true;     //歌曲信息页面出现
                that.isView3 = false;    //关闭歌曲MV页面
                that.isPlay = true;    //歌曲播放状态为true
                that.isView5 = false;  //搜索结果与歌曲MV切换
                that.newName = item.name;   //当前播放歌曲名称
                that.newId = item.id;   //当前播放歌曲ID
                that.isViewmenu=false;
            } else {
                alert("该歌曲只有MV");
                this.$options.methods.playMvAgain.bind(this)(item);
            }
            }
        },
        changeName_music: function (name) {   //点击歌名即可直接搜索
            this.type = 1;
            this.$options.methods.changeName.bind(this)(name);
        },
        changeName_artist: function (name) {   //点击歌星即可直接搜索
            this.type = 1;
            this.$options.methods.changeName.bind(this)(name);
        },
        doit: function () {   //搜索方法
            var that = this;
            this.isView1 = true;      //搜索页面打开
            this.isdoit = true;
            axios.get("http://test.codeedu.com.cn/wangyiyun/search?keywords=" + this.musicName + "&limit=50&type=" + this.type + "&offset=" + this.offset * 50)
                .then(function (response) {
                    //console.log(response);
                    that.musicList = response.data.result.songs;
                    that.songCount = response.data.result.songCount;
                    if (parseInt(that.songCount) % 50 == 0) {
                        that.page = (parseInt(that.songCount) / 50);
                    } else {
                        that.page = parseInt(parseInt(that.songCount) / 50) + 1;
                    }
                    //console.log("page=" + that.page);
                    //console.log(response.data.result.songCount);
                    //console.log(that.songCount);
                    for (i = 0; i < that.musicList.length; i++) {  //对歌曲时间数据进行转换得到正确格式
                        //console.log(that.musicList[i].duration)
                        var d = parseInt(that.musicList[i].duration);
                        d = parseInt(d / 1000);
                        var m = parseInt(d / 60);
                        var s = d - 60 * m;
                        if (s < 10) {
                            s = "0" + s;
                        }
                        that.musicList[i].duration = m + ":" + s;
                        //console.log(m+":"+s);
                        //console.log(that.musicList[i].duration);
                    }
                }, function (err) {
                    //console.log(response);
                })
            if (that.historyList.length == 0) {   //历史搜索列表为空直接将搜索内容放入历史搜索列表
                that.historyList.push(that.musicName);
            }
            else {
                for (i = 0; i < that.historyList.length; i++) {  //防止该搜索内容重复放入该历史搜索列表
                    if (that.musicName == that.historyList[i]) {
                        break;
                    }
                    if (i == that.historyList.length - 1) {
                        that.historyList.push(that.musicName);
                        break;
                    }
                }
            }
            //console.log(that.historyList); 
            if (that.HL.length == 0) {   //历史搜索列表为空直接将搜索内容放入历史搜索列表
                that.HL.push(that.musicName);
                that.hl = 0;
                //console.log(that.hl);
            }
            else {
                for (i = 0; i < that.HL.length; i++) {  //防止该搜索内容重复放入该历史搜索列表
                    if (that.musicName == that.HL[i]) {
                        break;
                    }
                    if (i == that.HL.length - 1) {
                        that.HL.push(that.musicName);
                        that.hl = that.HL.length - 1;
                        that.L = 0;
                        //console.log(that.hl);
                        break;
                    }
                }
            }
            // //console.log(that.HL);   
            // for(i=0;i<that.historyList.length;i++){
            //     localStorage.setItem(i,that.historyList[i]);
            //     var name=localStorage.getItem(i);
            //     //console.log(i);
            //     //console.log(name);
            // }
            localStorage.setItem("historyList", JSON.stringify(that.historyList));
            that.isViewmenu = false;
        },
        //下列分别是首页、上一页、下一页、尾页、改变最新或热门类型、页数跳转
        offsettop: function () { 
            this.offset = 0;
            this.$options.methods.doit.bind(this)();
        },
        offsetadd: function () {
            this.offset++;
            //console.log(this.offset);
            this.$options.methods.doit.bind(this)();
        },
        offsetsub: function () {
            this.offset--;
            this.$options.methods.doit.bind(this)();
        },
        offsetbot: function () {
            if (this.page != 0) {
                this.offset = this.page - 1;
                //console.log(this.get2musicoffset);
                this.$options.methods.doit.bind(this)();
            }
        },
        offsetpage: function (c) {
            if (c != this.coffset + 1) {
                this.offset = c - 1;
                this.$options.methods.doit.bind(this)();
            }
        },
        jump: function () {
            var a = document.getElementById("jump").value;
            if (a > this.page) {
                a = this.page;
            }
            if (a <= 0) {
                a = 1;
            }
            this.offset = a - 1;
            this.$options.methods.doit.bind(this)();
        },
        menudoit: function (item) { //获得音乐url
            var that = this;
            axios.get("http://test.codeedu.com.cn/wangyiyun/song/url?id=" + item.id)
                .then(function (response) {
                    //console.log(response.data.data[0].url);
                    that.musicUrl = response.data.data[0].url;
                }, function (err) { })
        },
        searchMusic: function () {  //搜索歌曲
            if (this.musicName == "") {
                var a = document.getElementById("searchText");
                a.focus();
            } else {
                var that = this;
                this.type = 1;
                this.offset = 0;
                this.$options.methods.doit.bind(this)();
            }
        },
        changeName: function (name) {   //点击歌名或歌星即可直接搜索
            var that = this;
            this.musicName = name;
            this.offset = 0;
            this.$options.methods.doit.bind(this)();
        },
        playMv: function (item) {   //播放MV
            if(this.newId!=item.id){
                var that = this;
            //console.log(item);
            if (item.id != item.mvid) {
                axios.get("https://autumnfish.cn/song/url?id=" + item.id)
                    .then(function (response) {
                        //console.log(response.data.data[0].url);
                        that.musicUrl = response.data.data[0].url;
                    }, function (err) { })
                axios.get("https://autumnfish.cn/comment/hot?type=0&id=" + item.id)
                    .then(function (response) {
                        //console.log(response);
                        that.hotComments = response.data.hotComments;
                    })
                axios.get("https://autumnfish.cn/song/detail?ids=" + item.id)
                    .then(function (response) {
                        //console.log(response.data.songs[0].al.picUrl);
                        that.musicCover = response.data.songs[0].al.picUrl;
                    }, function (err) {
                        //console.log(err);
                    })
            } else {
                axios.get("http://test.codeedu.com.cn/wangyiyun/comment/mv?id=" + item.id)
                    .then(function (response) {
                        //console.log(response);
                        that.hotComments = response.data.hotComments;
                    })
            }
            axios.get("http://test.codeedu.com.cn/wangyiyun/mv/url?id=" + item.mvid)
                .then(function (response) {
                    that.mvUrl = response.data.data.url;
                }, function (err) {
                    //console.log(response);
                })
            that.isView1 = false;  //搜索结果页面关闭
            that.isView2 = false;   //歌曲信息页面关闭
            that.isView3 = true;   //歌曲MV页面打开
            that.isView5 = true;   //搜索结果与歌曲MV切换
            that.newName = item.name;
            that.newId = item.id;
            that.isViewmenu = false;
            //将该歌曲放入播放列表
            if (that.newList.length == 0) {
                that.newList.push(item)
            }
            else {    //防止该歌曲重复放入该播放列表
                for (i = 0; i < that.newList.length; i++) {
                    if (item.id == that.newList[i].id) {
                        break;
                    }
                    if (i == that.newList.length - 1) {
                        that.newList.push(item);
                    }
                }
            }
            localStorage.setItem("newList", JSON.stringify(that.newList));
            }
        },
        playMvAgain: function (item) {   //从列表里播放MV
            if(this.newId!=item.id){
                var that = this;
            axios.get("http://test.codeedu.com.cn/wangyiyun/mv/url?id=" + item.mvid)
                .then(function (response) {
                    that.mvUrl = response.data.data.url;
                }, function (err) {
                    //console.log(response);
                })
            axios.get("http://test.codeedu.com.cn/wangyiyun/comment/mv?id=" + item.id)
                .then(function (response) {
                    //console.log(response);
                    that.hotComments = response.data.hotComments;
                })
            that.isView1 = false;  //搜索结果页面关闭
            that.isView2 = false;   //歌曲信息页面关闭
            that.isView3 = true;   //歌曲MV打开
            that.isView5 = true;    //搜索结果与歌曲MV切换
            that.newName = item.name;
            that.newId = item.id;
            that.isViewmenu = false;
            }  //在播放列表点击播放MV         
        },
        viewcover:function(){  //显示歌曲封面
            this.isViewcover=!this.isViewcover;
        },
        Return: function () {   //搜索结果页面与歌曲信息页面转换按钮
            if (this.isView3 == true) {
                this.isPlay = false;
                this.newId = "";
            }
            this.isView1 = !this.isView1;
            this.isView3 = false;
        },
        Return_: function () {   //搜索结果页面与歌曲MV页面转换按钮
            this.isView1 = !this.isView1;
            this.isView3 = true;
            this.isView5 = true;
        },
        Return__: function () {   //搜索结果页面与歌曲信息页面转换按钮
            if (this.isView3 == true) {
                this.isPlay = false;
                this.newId = "";
            }
            this.isView1 = !this.isView1;
            this.isView3 = false;
        },
        delHistoryList: function (index) {  //删除单个历史记录
            this.historyList.splice(index, 1);
            localStorage.setItem("historyList", JSON.stringify(this.historyList));

        },
        del: function (index) {  //播放列表删除按钮
            this.newList.splice(index, 1);
            localStorage.setItem("newList", JSON.stringify(this.newList));
        },
        Play: function () {    //audio播放
            this.isPlaying = true;
        },
        Pause: function () {   //audio暂停
            this.isPlaying = false;
        },
        changetime:function(index){    //点击歌词跳转
            var a=document.getElementById("audio1");
            a.currentTime=this.Time[index];
            this.isViewcover=true;
        },
        author:function(){  //作者须知
            alert("版权所有©福建师范大学19级\n软工二班刘行风、软工二班黄家明");
        },
    },
})
    </script>
    <script>
        if(localStorage.getItem("Src")!=null){
            var Src=JSON.parse(localStorage.getItem("Src"));
            document.body.style.backgroundImage='url('+Src+')';  
        }
        var count = 0
            for (var i = 97; i < 123; i++) {
            app.get2initials[count] = String.fromCharCode(i);
            count++;
        }         
    </script>   
    <script>
        var nav=document.querySelector('.nav');
        var lis=nav.children;
        for(var i=0;i<lis.length;i++){
            lis[i].onmouseover=function(){
                this.children[1].style.display=style='block';
            }
            lis[i].onmouseout=function(){
                this.children[1].style.display=style='none';
            }
        }
        //1.获取元素
        var imgs = document.querySelector('.nav').querySelectorAll('img');
    //.2.注册事件
        for(var i=0; i<imgs.length; i++){
            imgs[i].onclick =function(){
                document.body.style.body.backgroundImage='url('+this.src+')';  
                localStorage.setItem("Src", JSON.stringify(this.src));
                app.imgshow=false;             
            }
        }
    </script>
    <script>
        function $(id){
            return document.getElementById(id);
        }                   
            window.onload=function(){
                var au=$("audio1");  
                //console.log(au);     
                setInterval(function(){
                    if(!au.paused){
                        app.thisTime=au.currentTime;
                        //console.log(app.thisTime);
                        for(i=app.Time.length-1;i>=0;i--){
                            //console.log(app.Time[i]);
                            if(parseFloat(app.Time[i])<=parseFloat(app.thisTime)){
                                app.keyIndex=i;
                                //console.log("length="+app.Time.length);
                                //console.log(app.Time[i]);
                                //console.log(app.keyIndex);
                                break;
                            }
                        }
                    }
                },200);  //每200毫秒获取一次  
        }
        $("video1").onplay=function(){
            $("audio1").pause();
        }
        $("audio1").onplay=function(){
            $("video1").pause();
        }
        $("nav").onmouseleave=function(){
            app.imgshow=false;
        }
        app.$options.methods.get1.bind(app)(app.get1_1); //页面加载时出现歌单页面
        if(localStorage.getItem("historyList")!=null){
            app.historyList=JSON.parse(localStorage.getItem("historyList"));
        }   
        if(localStorage.getItem("newList")!=null){
            app.newList=JSON.parse(localStorage.getItem("newList"));
        }         
        $("menu1_1").onmouseleave=function(){
            app.ismenu1_1=false;
        }          
        $("historyList").onmouseleave=function(){
            app.isView4=false;
        }
        $("logo").onmousedown=function(){
            $("logo").src="img/听个锤子2.png"
        }   
        $("logo").onmouseup=function(){
            $("logo").src="img/听个锤子1.png"
        }    
    </script>   
</body>
</html>